<template>
    <div class="snow-container">
        <!-- 雪花效果将在这里渲染 -->
    </div>

    <div class="snow-man">
        <Snow></Snow>
    </div>

</template>

<script setup>
import { onMounted } from 'vue';
import Snow from './Snow.vue'

function loadScript(src) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

onMounted(async () => {
    // 通过 Vite 的 import.meta.url 获取正确路径
    const jqueryJs = new URL('../assets/js/snow/jquery.js', import.meta.url).href;
    const snowyJs = new URL('../assets/js/snow/snowy.js', import.meta.url).href;
    const snowJs = new URL('../assets/js/snow/Snow.js', import.meta.url).href;

    try {
        await loadScript(jqueryJs);
        await loadScript(snowyJs);
        await loadScript(snowJs);
    } catch (e) {
        console.error('加载雪花脚本失败', e);
    }
});
</script>

<style scoped>
.snow-container {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.snow-man{
    width: 200px;
    height: 200px;
    position: fixed;
    bottom: 30px;
    right: 20px;
    overflow: visible;
}
</style>